<template>
    <uxt-page
		:back="false"
        title="uxt - uniapp组件库"
    >
        <uxt-title-bar
            bg-color=" "
            classes="margin-bottom solid-bottom"
            title="内置样式"
        ></uxt-title-bar>
        <view class="nav-list">
            <navigator
                :class="[`bg-${item.color}`]"
                :key="index"
                :url="`/pages/yangshi/${item.name}`"
                class="nav-li"
                hover-class="none"
                v-for="(item, index) in yangshi"
            >
                <view class="nav-title">{{ item.title }}</view>
                <view class="nav-name">{{ item.name }}</view>
                <view class="nav-icon">
                    <uxt-icon :type="item.icon"></uxt-icon>
                </view>
            </navigator>
        </view>
        <uxt-title-bar
            bg-color=" "
            classes="margin-bottom solid-bottom"
            title="基础组件"
        ></uxt-title-bar>
        <view class="nav-list">
            <navigator
                :class="[`bg-${item.color}`]"
                :key="index"
                :url="`/pages/jichu/${item.name}`"
                class="nav-li"
                hover-class="none"
                v-for="(item, index) in jichu"
            >
                <view class="nav-title">{{ item.title }}</view>
                <view class="nav-name">{{ item.name }}</view>
                <view class="nav-icon">
                    <uxt-icon :type="item.icon"></uxt-icon>
                </view>
            </navigator>
        </view>
        <uxt-title-bar
            bg-color=" "
            classes="margin-bottom solid-bottom"
            title="表单组件"
        ></uxt-title-bar>
        <view class="nav-list">
            <navigator
                :class="[`bg-${item.color}`]"
                :key="index"
                :url="`/pages/biaodan/${item.name}`"
                class="nav-li"
                hover-class="none"
                v-for="(item, index) in biaodan"
            >
                <view class="nav-title">{{ item.title }}</view>
                <view class="nav-name">{{ item.name }}</view>
                <view class="nav-icon">
                    <uxt-icon :type="item.icon"></uxt-icon>
                </view>
            </navigator>
        </view>
        <uxt-title-bar
            bg-color=" "
            classes="margin-bottom solid-bottom"
            title="反馈组件"
        ></uxt-title-bar>
        <view class="nav-list">
            <navigator
                :class="[`bg-${item.color}`]"
                :key="index"
                :url="`/pages/fankui/${item.name}`"
                class="nav-li"
                hover-class="none"
                v-for="(item, index) in fankui"
            >
                <view class="nav-title">{{ item.title }}</view>
                <view class="nav-name">{{ item.name }}</view>
                <view class="nav-icon">
                    <uxt-icon :type="item.icon"></uxt-icon>
                </view>
            </navigator>
        </view>
        <uxt-title-bar
            bg-color=" "
            classes="margin-bottom solid-bottom"
            title="展示组件"
        ></uxt-title-bar>
        <view class="nav-list">
            <navigator
                :class="[`bg-${item.color}`]"
                :key="index"
                :url="`/pages/zhanshi/${item.name}`"
                class="nav-li"
                hover-class="none"
                v-for="(item, index) in zhanshi"
            >
                <view class="nav-title">{{ item.title }}</view>
                <view class="nav-name">{{ item.name }}</view>
                <view class="nav-icon">
                    <uxt-icon :type="item.icon"></uxt-icon>
                </view>
            </navigator>
        </view>
        <uxt-title-bar
            bg-color=" "
            classes="margin-bottom solid-bottom"
            title="导航组件"
        ></uxt-title-bar>
        <view class="nav-list">
            <navigator
                :class="[`bg-${item.color}`]"
                :key="index"
                :url="`/pages/daohang/${item.name}`"
                class="nav-li"
                hover-class="none"
                v-for="(item, index) in daohang"
            >
                <view class="nav-title">{{ item.title }}</view>
                <view class="nav-name">{{ item.name }}</view>
                <view class="nav-icon">
                    <uxt-icon :type="item.icon"></uxt-icon>
                </view>
            </navigator>
        </view>
    </uxt-page>
</template>

<script>
import uxtTitleBar from '@xtcoder/uxt/components/uxt-title-bar.vue'
import uxtIcon from '@xtcoder/uxt/components/uxt-icon.vue'

export default {
    components: {
        uxtTitleBar,
        uxtIcon
    },
    data() {
        return {
            yangshi: [
                {
                    title: '文本',
                    name: 'text',
                    color: this.randomColor(),
                    icon: 'font'
                },
                {
                    title: '背景',
                    name: 'background',
                    color: this.randomColor(),
                    icon: 'square'
                },
                {
                    title: '边框',
                    name: 'border',
                    color: this.randomColor(),
                    icon: 'square-o'
                },
                {
                    title: '布局',
                    name: 'layout',
                    color: this.randomColor(),
                    icon: 'columns'
                },
                {
                    title: '动画',
                    name: 'animation',
                    color: this.randomColor(),
                    icon: 'clock-o'
                }
            ],
            jichu: [
                {
                    title: '页面容器',
                    name: 'page',
                    color: this.randomColor(),
                    icon: 'globe'
                },
                {
                    title: '图标',
                    name: 'icon',
                    color: this.randomColor(),
                    icon: 'font-awesome'
                },
                {
                    title: '按钮',
                    name: 'button',
                    color: this.randomColor(),
                    icon: 'hand-pointer-o'
                },
                {
                    title: '通栏',
                    name: 'bar',
                    color: this.randomColor(),
                    icon: 'angle-right'
                },
                {
                    title: '模态窗',
                    name: 'modal',
                    color: this.randomColor(),
                    icon: 'bug'
                }
            ],
            biaodan: [
                {
                    title: '单选框',
                    name: 'radio',
                    color: this.randomColor(),
                    icon: 'dot-circle-o'
                },
                {
                    title: '复选框',
                    name: 'checkbox',
                    color: this.randomColor(),
                    icon: 'check-square'
                },
                {
                    title: '开关',
                    name: 'switch',
                    color: this.randomColor(),
                    icon: 'toggle-on'
                },
                {
                    title: '输入框',
                    name: 'input',
                    color: this.randomColor(),
                    icon: 'edit'
                },
                {
                    title: '单选器',
                    name: 'single-selector',
                    color: this.randomColor(),
                    icon: 'check'
                },
                {
                    title: '多选器',
                    name: 'multi-selector',
                    color: this.randomColor(),
                    icon: 'check-square-o'
                },
                {
                    title: '颜色选择器',
                    name: 'color-selector',
                    color: this.randomColor(),
                    icon: 'eyedropper'
                },
                {
                    title: '滑选器',
                    name: 'picker',
                    color: this.randomColor(),
                    icon: 'hand-o-up'
                },
                {
                    title: '时间滑选器',
                    name: 'time-picker',
                    color: this.randomColor(),
                    icon: 'calendar-check-o'
                },
                {
                    title: '日期滑选器',
                    name: 'date-picker',
                    color: this.randomColor(),
                    icon: 'calendar'
                },
                {
                    title: '表单',
                    name: 'form',
                    color: this.randomColor(),
                    icon: 'pencil'
                }
            ],
            fankui: [
                {
                    title: '上拉菜单',
                    name: 'action-sheet',
                    color: this.randomColor(),
                    icon: 'arrow-up'
                },
                {
                    title: '页面加载',
                    name: 'page-loading',
                    color: this.randomColor(),
                    icon: 'circle-o-notch'
                },
                {
                    title: '加载等待',
                    name: 'loading',
                    color: this.randomColor(),
                    icon: 'spinner'
                },
                {
                    title: '下拉刷新',
                    name: 'pulldown-refresh',
                    color: this.randomColor(),
                    icon: 'circle-o-notch'
                },
                {
                    title: '滑动操作',
                    name: 'swipe-action',
                    color: this.randomColor(),
                    icon: 'hand-o-left'
                },
                {
                    title: '对话框',
                    name: 'dialog',
                    color: this.randomColor(),
                    icon: 'question-circle'
                },
                {
                    title: '消息通知',
                    name: 'notify',
                    color: this.randomColor(),
                    icon: 'exclamation-circle'
                },
                {
                    title: '轻提示',
                    name: 'toast',
                    color: this.randomColor(),
                    icon: 'exclamation-triangle'
                }
            ],
            zhanshi: [
                {
                    title: '角标',
                    name: 'badge',
                    color: this.randomColor(),
                    icon: 'circle'
                },
                {
                    title: '头像',
                    name: 'avatar',
                    color: this.randomColor(),
                    icon: 'user'
                },
                {
                    title: '分隔线',
                    name: 'divider',
                    color: this.randomColor(),
                    icon: 'minus'
                },
                {
                    title: '进度条',
                    name: 'progress',
                    color: this.randomColor(),
                    icon: 'tasks'
                },
                {
                    title: '步骤条',
                    name: 'steps',
                    color: this.randomColor(),
                    icon: 'check-circle'
                },
                {
                    title: '标签',
                    name: 'tag',
                    color: this.randomColor(),
                    icon: 'tag'
                },
                {
                    title: '时间轴',
                    name: 'timeline',
                    color: this.randomColor(),
                    icon: 'clock-o'
                }
            ],
            daohang: [
                {
                    title: '浮动按钮',
                    name: 'fab',
                    color: this.randomColor(),
                    icon: 'plus-circle'
                },
                {
                    title: '宫格',
                    name: 'grid',
                    color: this.randomColor(),
                    icon: 'th'
                },
                {
                    title: '导航栏',
                    name: 'nav-bar',
                    color: this.randomColor(),
                    icon: 'angle-left'
                },
                {
                    title: 'Tab页',
                    name: 'tab',
                    color: this.randomColor(),
                    icon: 'folder'
                },
                {
                    title: 'Tab栏',
                    name: 'tab-bar',
                    color: this.randomColor(),
                    icon: 'home'
                },
                {
                    title: '标题栏',
                    name: 'title-bar',
                    color: this.randomColor(),
                    icon: 'circle'
                }
                // {
                // 	title: '列表',
                // 	name: 'list',
                // 	color: 'orange',
                // 	icon: 'list'
                // }
            ]
        }
    },
    methods: {
        randomColor() {
            const colors = [
                'red',
                'orange',
                'yellow',
                'olive',
                'green',
                'cyan',
                'blue',
                'purple',
                'mauve',
                'pink',
                'brown',
                'grey',
                'black'
            ]
            let i = Math.floor(Math.random() * 13)
            return colors[i]
        }
    }
}
</script>

<style lang="scss" scoped>
.nav-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0px 40rpx 0px;
    justify-content: space-between;
}

.nav-li {
    padding: 30rpx;
    border-radius: 12rpx;
    width: 45%;
    margin: 0 2.5% 40rpx;
    background-image: url();
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
}

.nav-li::after {
    content: '';
    position: absolute;
    z-index: -1;
    background-color: inherit;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: -10%;
    border-radius: 10rpx;
    opacity: 0.2;
    transform: scale(0.9, 0.9);
}

.nav-li.cur {
    color: #fff;
    background: rgb(94, 185, 94);
    box-shadow: 4rpx 4rpx 6rpx rgba(94, 185, 94, 0.4);
}

.nav-title {
    font-size: 32rpx;
    font-weight: 300;
}

.nav-title::first-letter {
    font-size: 40rpx;
    margin-right: 4rpx;
}

.nav-name {
    font-size: 28rpx;
    text-transform: Capitalize;
    margin-top: 20rpx;
    position: relative;
}

.nav-name::before {
    content: '';
    position: absolute;
    display: block;
    width: 40rpx;
    height: 6rpx;
    background: #fff;
    bottom: 0;
    right: 0;
    opacity: 0.5;
}

.nav-name::after {
    content: '';
    position: absolute;
    display: block;
    width: 100rpx;
    height: 1px;
    background: #fff;
    bottom: 0;
    right: 40rpx;
    opacity: 0.3;
}

.nav-name::first-letter {
    font-weight: bold;
    font-size: 36rpx;
    margin-right: 1px;
}

.nav-li .nav-icon {
    display: inline-block;
    position: absolute;
    right: 30rpx;
    top: 30rpx;
    font-size: 52rpx;
    width: 60rpx;
    height: 60rpx;
    text-align: center;
    line-height: 60rpx;
}

.text-light {
    font-weight: 300;
}
</style>
